<!--
 * 字典数据详情查看页面
 * 基于蒜苔系统字典管理设计文档重写，提供完整的详情展示功能
 -->

<template>
  <a-modal
    v-model:open="visible"
    title="字典数据详情"
    width="800px"
    :footer="null"
    @cancel="handleCancel"
  >
    <div v-if="detailData" class="detail-content">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <InfoCircleOutlined />
          基本信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="字典类型">
            <a-tag color="blue">{{ detailData.dictType }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="字典标签">
            <a-tag :color="getTagColor(detailData.listClass)" :class="detailData.cssClass">
              {{ detailData.dictLabel }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="字典值">
            <code class="dict-value">{{ detailData.dictValue }}</code>
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="detailData.status === 1 ? 'success' : 'error'">
              {{ detailData.status === 1 ? '启用' : '禁用' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="默认值">
            <a-tag :color="detailData.isDefault === 1 ? 'orange' : 'default'">
              {{ detailData.isDefault === 1 ? '是' : '否' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="排序序号">
            <span class="sort-order">{{ detailData.sortOrder }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 样式信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <BgColorsOutlined />
          样式信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="CSS样式类">
            <a-tag v-if="detailData.cssClass" :class="detailData.cssClass">
              {{ detailData.cssClass }}
            </a-tag>
            <span v-else class="text-muted">-</span>
          </a-descriptions-item>
          <a-descriptions-item label="列表样式类">
            <a-tag v-if="detailData.listClass" :color="getTagColor(detailData.listClass)">
              {{ detailData.listClass }}
            </a-tag>
            <span v-else class="text-muted">-</span>
          </a-descriptions-item>
          <a-descriptions-item label="样式预览" :span="2">
            <div class="style-preview">
              <a-tag :color="getTagColor(detailData.listClass)" :class="detailData.cssClass">
                {{ detailData.dictLabel }}
              </a-tag>
              <span class="preview-text">（实际显示效果）</span>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 描述信息 -->
      <div class="detail-section" v-if="detailData.dictDesc">
        <h3 class="section-title">
          <FileTextOutlined />
          描述信息
        </h3>
        <div class="description-content">
          {{ detailData.dictDesc }}
        </div>
      </div>

      <!-- 扩展数据 -->
      <div class="detail-section" v-if="detailData.extraData">
        <h3 class="section-title">
          <CodeOutlined />
          扩展数据
        </h3>
        <div class="extra-data-content">
          <pre>{{ formatExtraData(detailData.extraData) }}</pre>
        </div>
      </div>

      <!-- 层级信息 -->
      <div class="detail-section" v-if="detailData.level > 1 || detailData.parentId > 0">
        <h3 class="section-title">
          <ApartmentOutlined />
          层级信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="父级ID">
            {{ detailData.parentId || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="层级">
            {{ detailData.level }}
          </a-descriptions-item>
          <a-descriptions-item label="路径">
            {{ detailData.path }}
          </a-descriptions-item>
          <a-descriptions-item label="是否叶子节点">
            <a-tag :color="detailData.isLeaf === 1 ? 'success' : 'processing'">
              {{ detailData.isLeaf === 1 ? '是' : '否' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 系统信息 -->
      <div class="detail-section">
        <h3 class="section-title">
          <ClockCircleOutlined />
          系统信息
        </h3>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="创建时间">
            {{ formatDateTime(detailData.createdTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
            {{ formatDateTime(detailData.updatedTime) }}
          </a-descriptions-item>
          <a-descriptions-item label="创建人">
            {{ detailData.createdBy || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="更新人">
            {{ detailData.updatedBy || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 约束信息 -->
      <div class="detail-section" v-if="detailData.constraint">
        <h3 class="section-title">
          <LockOutlined />
          约束信息
        </h3>
        <div class="constraint-content">
          {{ detailData.constraint }}
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-content">
      <a-spin size="large">
        <div class="loading-text">加载中...</div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { 
  InfoCircleOutlined, 
  BgColorsOutlined, 
  FileTextOutlined, 
  CodeOutlined,
  ApartmentOutlined,
  ClockCircleOutlined,
  LockOutlined
} from '@ant-design/icons-vue';
import type { SysDictData } from './types';

// 响应式数据
const visible = ref(false);
const detailData = ref<SysDictData | null>(null);

// 获取标签颜色
function getTagColor(listClass?: string): string {
  const colorMap: Record<string, string> = {
    'success': 'success',
    'primary': 'processing',
    'warning': 'warning',
    'danger': 'error',
    'processing': 'processing',
    'pink': 'magenta',
    'default': 'default'
  };
  return colorMap[listClass || 'default'] || 'default';
}

// 格式化日期时间
function formatDateTime(dateTime?: string): string {
  if (!dateTime) return '-';
  return dateTime;
}

// 格式化扩展数据
function formatExtraData(extraData: string): string {
  try {
    const parsed = JSON.parse(extraData);
    return JSON.stringify(parsed, null, 2);
  } catch {
    return extraData;
  }
}

// 打开详情弹窗
function openModal(data: SysDictData) {
  detailData.value = data;
  visible.value = true;
}

// 处理取消
function handleCancel() {
  visible.value = false;
  detailData.value = null;
}

// 暴露方法给父组件
defineExpose({
  openModal
});
</script>

<style scoped>
.detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 8px;
}

.dict-value {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #d63384;
}

.sort-order {
  font-weight: 500;
  color: #1890ff;
}

.text-muted {
  color: #999;
}

.style-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-text {
  color: #666;
  font-size: 12px;
}

.description-content {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 16px;
  color: #333;
  line-height: 1.6;
}

.extra-data-content {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
}

.extra-data-content pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #24292e;
  white-space: pre-wrap;
  word-break: break-all;
}

.constraint-content {
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
  padding: 16px;
  color: #d46b08;
  line-height: 1.6;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.loading-text {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
}

/* 描述列表样式优化 */
:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  color: #333;
  background-color: #fafafa;
}

:deep(.ant-descriptions-item-content) {
  color: #666;
}

/* 标签样式 */
:deep(.ant-tag) {
  margin-right: 0;
  border-radius: 4px;
}

/* 滚动条样式 */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.ant-modal) {
    width: 95% !important;
    margin: 10px auto;
  }
  
  :deep(.ant-descriptions) {
    font-size: 12px;
  }
  
  .section-title {
    font-size: 14px;
  }
}
</style>